<template>
  <div>
    <a-card>
      <a-table :columns="columns" :data-source="userdata">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> 用户名称</span>
        <!-- <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span> -->
        <span slot="action" slot-scope="text, record">
          <a @click="showModal(record)">编辑</a>
          <a-divider type="vertical" />
          
          <a-popconfirm
            title="你确定要删除这个用户？"
            ok-text="Yes"
            cancel-text="No"
            @confirm="delecte(record)"
            @cancel="cancel"
          >
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>

      <a-modal
        title="管理员修改用户信息"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
          <a-form-item label="id">
            <a-input
              disabled
              v-decorator="[
                'id',
                { initialValue: this.tochange.id },
                { rules: [{ required: true, message: 'Please input your userName!' }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="userId">
            <a-input
              disabled
              v-decorator="[
                'userId',
                { initialValue: this.tochange.userId },
                { rules: [{ required: true, message: 'Please input your userName!' }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="用户名称">
            <a-input
              v-decorator="[
                'userName',
                { initialValue: this.tochange.userName },
                { rules: [{ required: true, message: 'Please input your userName!' }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="用户真实姓名">
            <a-input
              v-decorator="[
                'userRealName',
                { initialValue: this.tochange.userRealName },
                { rules: [{ required: true, message: 'Please input your userRealName!' }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="生日">
            <a-date-picker
              format="YYYY-MM-DD"
              v-decorator="[
                'userBrith',
                { initialValue: this.tochange.userBrith },
                { rules: [{ required: true, message: 'Please input your userBrith!' }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="用户年龄">
            <a-input
              v-decorator="[
                'userAge',
                { initialValue: this.tochange.userAge },
                { rules: [{ required: true, message: 'Please input your userAgeuserAge!' }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="用户名称">
            <a-input
              v-decorator="[
                'userName',
                { initialValue: this.tochange.userName },
                { rules: [{ required: true, message: 'Please input your userName!' }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="用户电话">
            <a-input
              v-decorator="[
                'userPhone',
                { initialValue: this.tochange.userPhone },
                { rules: [{ required: true, message: 'Please input your userPhone!' }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="用户地址">
            <a-input
              v-decorator="[
                'userAddress',
                { initialValue: this.tochange.userAddress },
                { rules: [{ required: true, message: 'Please input your userAddress!' }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="E-mail">
            <a-input
              v-decorator="[
                'email',
                { initialValue: this.tochange.userEmail },
                {
                  rules: [
                    {
                      type: 'email',
                      message: 'The input is not valid E-mail!',
                    },
                    {
                      required: true,
                      message: 'Please input your E-mail!',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item label="用户登录密码" has-feedback>
            <a-input
              v-decorator="[
                'userPasswd',
                { initialValue: this.tochange.userPasswd },
                {
                  rules: [
                    {
                      required: true,
                      message: 'Please input your password!',
                    },
                  ],
                },
              ]"
              type="password"
            />
          </a-form-item>
          <a-form-item label="用户支付密码" has-feedback>
            <a-input
              v-decorator="[
                'userPaypass',
                { initialValue: this.tochange.userPaypass },
                {
                  rules: [
                    {
                      required: true,
                      message: 'Please input your password!',
                    },
                  ],
                },
              ]"
              type="password"
            />
          </a-form-item>
          <a-form-item label="性别">
            <a-select
              v-decorator="[
                'userSex',
                { initialValue: this.tochange.userSex },
                { rules: [{ required: true, message: 'Please select your userSex!' }] },
              ]"
              placeholder="Select a userSex"
              @change="handleSelectChange"
            >
              <a-select-option value="男"> 男 </a-select-option>
              <a-select-option value="女"> 女 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <!-- <a-button type="primary" html-type="submit"> Submit </a-button> -->
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: 'userName',
    key: 'id',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'userName' },
  },
  {
    title: '年龄',
    dataIndex: 'userAge',
  },
  {
    title: '用户地址',
    dataIndex: 'userAddress',
  },
  {
    title: '真实姓名',
    dataIndex: 'userRealName',
  },
  {
    title: '生日',
    dataIndex: 'userBrith',
  },
  //   {
  //     title: 'Tags',
  //     key: 'tags',
  //     dataIndex: 'tags',
  //     scopedSlots: { customRender: 'tags' },
  //   },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
]

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

import { queryAllUserList, deleteUser, modifyUser } from '../../api/user'
export default {
  data() {
    return {
      data,
      columns,
      params: {
        userName: '',
        pageNum: 1,
        pageSize: 10,
      },
      userdata: [],
      visible: false,
      confirmLoading: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      tochange: {},
    }
  },
  methods: {
    getdata() {
      queryAllUserList({
        ...this.params,
      })
        .then((res) => {
          if (res.code == 200) {
            this.userdata = res.data.list
            this.$notification.success({
              message: res.message,
            })
          } else {
            this.$notification.error({
              message: res.message,
            })
          }
        })
        .catch((err) => {})
    },
    showModal(record) {
      this.visible = true
      this.tochange = record
      console.log(this.tochange)
    },
    handleOk(e) {
      this.confirmLoading = true
      this.handleSubmit(e)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          if(values.userBrith._isAMomentObject){

            values.userBrith = values.userBrith.format('YYYY-MM-DD')
          }
          modifyUser({
            ...values,
          })
            .then((res) => {
              if (res.code == 200) {
                this.$notification.success({
                  message: res.message,
                })
                this.visible = false
                this.confirmLoading = false
                this.getdata()
              } else {
                this.visible = false
                this.confirmLoading = false
              }
            })
            .catch((err) => {
              this.$notification.success({
                message: err.message,
              })
              this.visible = false
              this.confirmLoading = false
            })
        }
      })
    },
    handleSelectChange(value) {
      console.log(value)
      this.form.setFieldsValue({
        note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
      })
    },
    delecte(record) {
      deleteUser({
        userId: record.userId,
      })
        .then((res) => {
          if (res.code == 200) {
            this.$notification.success({
              message: res.message,
            })
            this.getdata()
          } else {
            this.$notification.error({
              message: res.message,
            })
          }
        })
        .catch((err) => {})
    },
    cancel(e) {
      console.log(e);
      this.$message.error('取消了删除');
    },
  },
  created() {
    this.getdata()
  },
}
</script>
